import React  from 'react';
import BScroll from '@better-scroll/core'
// 状态
class App extends React.Component{
  state = {
    myname: "老王",
    list: [],
  };

  componentDidMount() {
      this.setState({
        list: [{'filmId':'01','name': '长津湖'},{'filmId':'02','name': '满江红'}]
      });
  }

  render() {
    console.log("render");
    return (
      <div>
        <button
          onClick={() => {
            this.setState({
              myname: "铁锤",
            });
          }}
        >
          click
        </button>
        <span id="myname">{this.state.myname}</span>

        <div
          id="warpper"
          style={{
            height: "100px",
            overflow: "hidden",
            background: "yellow",
          }}
        >
          <ul>
            {this.state.list.map((item) => (
              <li key={item.filmId}>{item.name}</li>
            ))}
          </ul>
        </div>
      </div>
    );
  }

  UNSAFE_componentWillUpdate() {
    //弃用
    console.log(
      "componentWillUpdate",
      document.getElementById("myname").innerHTML
    );
  }

  componentDidUpdate(prevProps, prevState) {
    console.log(
      "componentDidUpdate",
      document.getElementById("myname").innerHTML
    );

    // 更新后， 想要获取dom节点， 更新

    console.log(prevState.list);
    if (prevState.list.length === 0) {
      new BScroll("#warpper");
    }
  }
}

export default App;
